<template>
  <view class="content">
    <view class="header">
      <view class="tx">
        <image class="img" :src="salaryInfo.avatar"></image>
      </view>
      <view class="user-info">
        <view class="user">
          {{ salaryInfo.name }}
        </view>
        <view class="info">
          {{ salaryInfo.department }} | {{ salaryInfo.teaching_subject }}
        </view>
      </view>
    </view>
    <view class="contents">
      <view class="contents-top">
        <view class="select">
          <view class="uni-list-cell-db">
            <picker
              mode="date"
              :value="date"
              :start="startDate"
              :end="endDate"
              fields="year"
              @change="bindDateChange"
            >
              <view class="uni-input">
                {{ date }}
                <div class="v-select">
                  <image class="v-img" src="../../static/v.png"></image>
                </div>
              </view>
            </picker>
          </view>
        </view>
        <view class="price">
          ￥{{salaryInfo.total}} 
          <!-- ￥{{ totalAmount }} -->
        </view>
      </view>
      <view class="contents-list-box">
        <view
          class="contents-list"
          v-for="(item, index) in salaryList"
          :key="index"
          @click="jumpTo(item.id)"
        >
          <view class="contents-tops">
            <view class="contents-top-left">
              {{ item.salary_month }}月份工资单
            </view>
            <view class="contents-top-left"> ￥{{ item.total }} </view>
          </view>
          <view class="content-bottom">
            <view class="contents-bottom-left"> {{ item.send_time }}发放 </view>
            <view class="contents-top-left"> 实发金额 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
import { salaryList } from "@/api/salary.js";
export default {
  data() {
    return {
      title: "Hello",
      date: moment(Number(new Date())).format("YYYY"),
      // date:Number(new Date()),
      startDate: "2000-01-01",
      endDate: "2100-01-01",
      salaryList: [],
      salaryInfo: "",
      totalAmount: 0,
    };
  },
  onLoad() {
    this.salaryListFn();
  },
  onShow() {},
  methods: {
    salaryListFn() {
      salaryList({
        time: this.date,
      }).then((res) => {
        if (res.code > 0) {
          console.log(123);
          this.salaryList = res.data.salary;
          this.salaryInfo = res.data.userinfo;
          this.totalAmount = 0;
          this.salaryList.forEach((item) => {
            this.totalAmount =
              this.totalAmount + parseFloat(item.issued_amount);
          });
          this.totalAmount = this.totalAmount.toFixed(2);
          console.log(this.totalAmount);
        }
      });
    },
    bindTimeChange(e) {
      console.log(e);
    },
    cancelStart() {
      this.showStart = false;
    },
    bindDateChange(e) {
      this.date = e.target.value;
      console.log(this.date);
      this.salaryListFn();
    },
    jumpTo(id) {
      uni.navigateTo({
        url: "/pages/salary/details?id=" + id,
      });
    },
  },
};
</script>

<style scoped>
.content {
  background: #f8f8f8;
  height: 100vh;
}
.header {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  background: #4871c0;
  padding: 10rpx;
}
.tx {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  border: 1rpx solid #ffffff;
  overflow: hidden;
  margin-left: 20rpx;
}
.img {
  width: 100%;
  height: 100%;
}
.user-info {
  margin-left: 20rpx;
  color: #fff;
}
.user {
  font-size: 20px;
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}
.contents {
}
.contents-top {
  width: 100%;
  height: 100rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  box-sizing: border-box;
}
.price {
  color: #fa9931;
}

.text-area {
  display: flex;
  justify-content: center;
}
.uni-input {
  display: flex;
  align-items: center;
}
.v-select {
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
}
.v-img {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.contents-list-box {
  padding: 0 20rpx;
}
.contents-list {
  height: 160rpx;
  width: 100%;
  background: #ffffff;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 15rpx;
  margin-top: 20rpx;
  padding: 0 20rox;
}
.contents-tops {
  margin-top: 10rpx;
  width: 100%;
  display: flex;
  font-size: 32rpx;
  justify-content: space-between;
  align-items: center;
}
.content-bottom {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999999;
  font-size: 24rpx;
}
</style>
